<template>
  <div class="peripheral-equipment detail-wrap">
    <template v-if="data.equipmentData.length>0">

      <Head
        title="场站设备"
        isBack
      >
        <template #content>
          <div class="peripheral-box">
            <div
              class="equipment-item"
              v-for="(item, index) in data.equipmentData"
              :key="index"
              :class="data.currentID==item.id?'activeItem':''"
              @click="changeEquipment(item)"
            >
              <div class="left-content">
                <div
                  v-if="item.deviceType=='1'"
                  class="iconfont icon-bianyaqiyunhangpingjia"
                ></div>
                <div
                  v-if="item.deviceType=='2'"
                  class="iconfont icon-nibianqi"
                ></div>
                <div
                  v-if="item.deviceType=='3'"
                  class="iconfont icon-chunengxitong"
                ></div>
                <div
                  v-if="item.deviceType=='4'"
                  class="iconfont icon-ziyuan1"
                ></div>
                <div
                  v-if="item.deviceType=='5'"
                  class="iconfont icon-zhaomingxitong"
                ></div>
                <div
                  v-if="item.deviceType=='6'"
                  class="iconfont icon-putongjiankongshebei"
                ></div>

                <div>{{ (item.deviceTypeDes) }}</div>
              </div>
              <div class="right-content">
                <div class="row-info">
                  <span class="label">设备编号</span>
                  <span class="value text-line">{{ item.deviceNum || '--' }}</span>
                </div>
                <div class="row-info">
                  <span class="label">设备名称</span>
                  <span class="value text-line">
                    <el-tooltip
                      effect="light"
                      placement="bottom-start"
                      :content="item.deviceName"
                    >{{ item.deviceName || '--' }}</el-tooltip>
                  </span>
                </div>
                <div class="row-info">
                  <span class="label">状态</span>
                  <span class="value">{{ item.deviceStatus == '0' ? '在线' : '离线' }}</span>
                </div>
              </div>
            </div>
          </div>
        </template>
      </Head>

      <Head title="设备信息">
        <template #content>
          <el-scrollbar class="">
            <template v-if="data.currentDeviceType!='6'">
              <div class="time-box">
                <div class="label">上送时间</div>
                <div>{{ data.detailData?.endTime || '--' }}</div>
              </div>
              <div class="row-box">
                <div
                  class="time-box"
                  v-for="(item, index) in data.currentDetailForm"
                  :key="index"
                >
                  <div class="label">{{ item.label }}</div>
                  <div>{{ (item.dic ? getLabel(item) : data.detailData[item.prop] || '--') }}</div>
                </div>
              </div>
              <div class="time-box">
                <div class="label">故障代码</div>
                <div>{{ data.detailData.faultCode ? String(data.detailData.faultCode) : '--' }}</div>
              </div>
            </template>
            <template v-else>
              <div class="single-row-box">
                <div class="time-box">
                  <div class="label">视频URL</div>
                  <div>{{ data.detailForm6.monitorUrl || '--' }}</div>
                </div>
                <div class="time-box">
                  <div class="label">归属电站</div>
                  <div>{{ data.detailForm6.stationName || '--' }}</div>
                </div>
                <div class="time-box">
                  <div class="label">运营商</div>
                  <div>{{ data.detailForm6.operator || '--' }}</div>
                </div>
              </div>
            </template>
          </el-scrollbar>
        </template>
      </Head>
    </template>
    <template v-else>

      <Head
        title=""
        isBack
      >
        <template #content>
          <div class="no-data-wrap">
            <div class="no-data"></div>
            <div class="text">暂无数据</div>
          </div>
        </template>
      </Head>
    </template>
  </div>
</template>

<script lang="ts" setup>
import Head from "@/components/head/index.vue";
import Detail from "@/components/form/detail.vue";
import {
  queryPeripheralList,
  selectDeviceRealTimeData,
} from "@/service/apis/pile";
import { queryDicByParent } from "@/service/apis/api";

const route = useRoute();
const {
  query: { id },
} = route;
const tableRef = ref();

const data = reactive({
  equipmentData: [] as any,
  peripheralType: [] as any,
  peripheralStatus: [] as any,
  detailData: {} as any,
  currentDeviceType: "1" as any,
  currentID: '' as any,
  currentDetailForm: [] as any,
  detailForm1: [
    {
      label: "网关编号",
      prop: "gateWayNum",
    },
    {
      label: "变压器编号",
      prop: "deviceNum",
    },
    {
      label: "状态",
      prop: "deviceStatus",
      dic: [] as any,
    },
    {
      label: "高压侧A相电压",
      prop: "voltageAHigh",
    },
    {
      label: "高压侧B相电压",
      prop: "voltageBHigh",
    },
    {
      label: "高压侧C相电压",
      prop: "voltageCHigh",
    },
    {
      label: "高压侧AB线电压",
      prop: "voltageABHigh",
    },
    {
      label: "高压侧BC线电压",
      prop: "voltageBCHigh",
    },
    {
      label: "高压侧CA线电压",
      prop: "voltageCAHigh",
    },
    {
      label: "高压侧A相电流",
      prop: "currentAHigh",
    },
    {
      label: "高压侧B相电流",
      prop: "currentBHigh",
    },
    {
      label: "高压侧C相电流",
      prop: "currentCHigh",
    },
    {
      label: "高压侧A相温度",
      prop: "temperatureAHigh",
    },
    {
      label: "高压侧B相温度",
      prop: "temperatureBHigh",
    },
    {
      label: "高压侧C相温度",
      prop: "temperatureCHigh",
    },
    {
      label: "低压侧A相电压",
      prop: "voltageALow",
    },
    {
      label: "低压侧B相电压",
      prop: "voltageBLow",
    },
    {
      label: "低压侧C相电压",
      prop: "voltageCLow",
    },
    {
      label: "低压侧AB线电压",
      prop: "voltageABLow",
    },
    {
      label: "低压侧BC线电压",
      prop: "voltageBCLow",
    },
    {
      label: "低压侧CA线电压",
      prop: "voltageCALow",
    },
    {
      label: "低压侧A相电流",
      prop: "currentALow",
    },
    {
      label: "低压侧B相电流",
      prop: "currentBLow",
    },
    {
      label: "低压侧C相电流",
      prop: "currentCLow",
    },
    {
      label: "低压侧A相温度",
      prop: "temperatureALow",
    },
    {
      label: "低压侧B相温度",
      prop: "temperatureBLow",
    },
    {
      label: "低压侧C相温度",
      prop: "temperatureCLow",
    },
    {
      label: "A相电流畸变率",
      prop: "currentDistortionA",
    },
    {
      label: "B相电流畸变率",
      prop: "currentDistortionB",
    },
    {
      label: "C相电流畸变率",
      prop: "currentDistortionC",
    },
    {
      label: "A相电压畸变率",
      prop: "voltageDistortionA",
    },
    {
      label: "B相电压畸变率",
      prop: "voltageDistortionB",
    },
    {
      label: "C相电压畸变率",
      prop: "voltageDistortionC",
    },
    {
      label: "频率",
      prop: "frequency",
    },
    {
      label: "功率因数",
      prop: "powerFactor",
    },
    {
      label: "当前有功功率",
      prop: "activePower",
    },
    {
      label: "当前无功功率",
      prop: "reactivePower",
    },
    {
      label: "当前视在功率",
      prop: "apparentPower",
    },

    {
      label: "有功电能总数",
      prop: "activeEnergy",
    },
    {
      label: "无功电能总数",
      prop: "reactiveEnergy",
    },
    {
      label: "反向有功电能总数",
      prop: "reverseActiveEnergy",
    },
  ] as any, // 变压器字段
  detailForm2: [
    {
      label: "网关编号",
      prop: "gateWayNum",
    },
    {
      label: "逆变器编号",
      prop: "deviceNum",
    },
    {
      label: "状态",
      prop: "deviceStatus",
      dic: [] as any,
    },
    {
      label: "A相电压",
      prop: "voltageA",
    },
    {
      label: "B相电压",
      prop: "voltageB",
    },
    {
      label: "C相电压",
      prop: "voltageC",
    },
    {
      label: "AB线电压",
      prop: "voltageAB",
    },
    {
      label: "BC线电压",
      prop: "voltageBC",
    },
    {
      label: "CA线电压",
      prop: "voltageCA",
    },
    {
      label: "A相电流",
      prop: "currentA",
    },
    {
      label: "B相电流",
      prop: "currentB",
    },
    {
      label: "C相电流",
      prop: "currentC",
    },
    {
      label: "A相温度",
      prop: "temperatureA",
    },
    {
      label: "B相温度",
      prop: "temperatureB",
    },
    {
      label: "C相温度",
      prop: "temperatureC",
    },
    {
      label: "A相电流畸变率",
      prop: "currentDistortionA",
    },
    {
      label: "B相电流畸变率",
      prop: "currentDistortionB",
    },
    {
      label: "C相电流畸变率",
      prop: "currentDistortionC",
    },
    {
      label: "A相电压畸变率",
      prop: "voltageDistortionA",
      unit: "kW",
    },
    {
      label: "B相电压畸变率",
      prop: "voltageDistortionB",
    },
    {
      label: "C相电压畸变率",
      prop: "voltageDistortionC",
    },
    {
      label: "频率",
      prop: "frequency",
    },
    {
      label: "功率因数",
      prop: "powerFactor",
    },
    {
      label: "当前有功功率",
      prop: "activePower",
    },
    {
      label: "当前无功功率",
      prop: "reactivePower",
    },
    {
      label: "当前视在功率",
      prop: "apparentPower",
    },
    {
      label: "当日有功电能总数",
      prop: "activeEnergy",
    },
    {
      label: "当日无功电能总数",
      prop: "reactiveEnergy",
    },
    {
      label: "当日反向有功电能总数",
      prop: "reverseActiveEnergy",
    },
  ] as any, // 逆变器字段
  detailForm3: [
    {
      label: "网关编号",
      prop: "gateWayNum",
    },
    {
      label: "储物柜编号",
      prop: "deviceNum",
    },
    {
      label: "状态",
      prop: "deviceStatus",
      dic: [] as any,
    },
    {
      label: "A相电压",
      prop: "voltageA",
    },
    {
      label: "B相电压",
      prop: "voltageB",
    },
    {
      label: "C相电压",
      prop: "voltageC",
    },
    {
      label: "AB线电压",
      prop: "voltageAB",
    },
    {
      label: "BC线电压",
      prop: "voltageBC",
    },
    {
      label: "CA线电压",
      prop: "voltageCA",
    },
    {
      label: "A相电流",
      prop: "currentA",
    },
    {
      label: "B相电流",
      prop: "currentB",
    },
    {
      label: "C相电流",
      prop: "currentC",
    },
    {
      label: "A相温度",
      prop: "temperatureA",
    },
    {
      label: "B相温度",
      prop: "temperatureB",
    },
    {
      label: "C相温度",
      prop: "temperatureC",
    },
    {
      label: "A相电流畸变率",
      prop: "currentDistortionA",
    },
    {
      label: "B相电流畸变率",
      prop: "currentDistortionB",
    },
    {
      label: "C相电流畸变率",
      prop: "currentDistortionC",
    },
    {
      label: "A相电压畸变率",
      prop: "voltageDistortionA",
      unit: "kW",
    },
    {
      label: "B相电压畸变率",
      prop: "voltageDistortionB",
    },
    {
      label: "C相电压畸变率",
      prop: "voltageDistortionC",
    },
    {
      label: "柜内温度 1",
      prop: "cabinetTemperature1",
    },
    {
      label: "柜内温度 2",
      prop: "cabinetTemperature2",
    },
    {
      label: "柜内温度 3",
      prop: "cabinetTemperature3",
    },
    {
      label: "频率",
      prop: "frequency",
    },
    {
      label: "储能额定容量",
      prop: "ratedCapacity",
    },
    {
      label: "已储电量",
      prop: "storageCapacity",
    },
    {
      label: "充放电状态",
      prop: "dischargingStatus", // 充放电状态 1：充电、4：放电、2：待机
      dic: [
        {
          label: "充电",
          value: "1",
        },
        {
          label: "待机",
          value: "2",
        },
        {
          label: "放电",
          value: "4",
        },
      ] as any,
    },
  ] as any, // 逆变器字段
  detailForm4: [
    {
      label: "网关编号",
      prop: "gateWayNum",
    },
    {
      label: "换电设备编号",
      prop: "deviceNum",
    },
    {
      label: "状态",
      prop: "deviceStatus",
      dic: [] as any,
    },
    {
      label: "A相电压",
      prop: "voltageA",
    },
    {
      label: "B相电压",
      prop: "voltageB",
    },
    {
      label: "C相电压",
      prop: "voltageC",
    },
    {
      label: "AB线电压",
      prop: "voltageAB",
    },
    {
      label: "BC线电压",
      prop: "voltageBC",
    },
    {
      label: "CA线电压",
      prop: "voltageCA",
    },
    {
      label: "A相电流",
      prop: "currentA",
    },
    {
      label: "B相电流",
      prop: "currentB",
    },
    {
      label: "C相电流",
      prop: "currentC",
    },
    {
      label: "A相温度",
      prop: "temperatureA",
    },
    {
      label: "B相温度",
      prop: "temperatureB",
    },
    {
      label: "C相温度",
      prop: "temperatureC",
    },
    {
      label: "A相电流畸变率",
      prop: "currentDistortionA",
    },
    {
      label: "B相电流畸变率",
      prop: "currentDistortionB",
    },
    {
      label: "C相电流畸变率",
      prop: "currentDistortionC",
    },
    {
      label: "A相电压畸变率",
      prop: "voltageDistortionA",
      unit: "kW",
    },
    {
      label: "B相电压畸变率",
      prop: "voltageDistortionB",
    },
    {
      label: "C相电压畸变率",
      prop: "voltageDistortionC",
    },
    {
      label: "频率",
      prop: "frequency",
    },
    {
      label: "功率因数",
      prop: "powerFactor",
    },
    {
      label: "当前有功功率",
      prop: "activePower",
    },
    {
      label: "当前无功功率",
      prop: "reactivePower",
    },
    {
      label: "当前视在功率",
      prop: "apparentPower",
    },
    {
      label: "有功电能总数",
      prop: "activeEnergy",
    },
    {
      label: "无功电能总数",
      prop: "reactiveEnergy",
    },
    {
      label: "反向有功电能总数",
      prop: "reverseActiveEnergy",
    },
  ] as any, // 换电系统字段
  detailForm5: [
    {
      label: "网关编号",
      prop: "gateWayNum",
    },
    {
      label: "灯头编号",
      prop: "deviceNum",
    },
    {
      label: "状态",
      prop: "deviceStatus",
      dic: [] as any,
    },
    {
      label: "灯亮状态",
      prop: "lightUpStatus", // 亮灯状态 0：关灯、1：开灯
      dic: [
        {
          label: "关灯",
          value: "0",
        },
        {
          label: "开灯",
          value: "1",
        },
      ] as any,
    },
    {
      label: "亮度情况",
      prop: "luminance",
    },
    {
      label: "电压",
      prop: "voltage",
    },
    {
      label: "电流",
      prop: "current",
    },
    {
      label: "功率",
      prop: "power",
    },
  ] as any, // 照明字段
  detailForm6: {} as any, // 视频监控数据
});

queryDicByParent({
  listDtos: ["peripheralType", "peripheralStatus"],
}).then((res: any) => {
  if (res) {
    data.peripheralType = res.peripheralType;
    data.peripheralStatus = res.peripheralStatus;
    data.detailForm1[2].dic = res.peripheralStatus;
    data.detailForm2[2].dic = res.peripheralStatus;
    data.detailForm3[2].dic = res.peripheralStatus;
    data.detailForm4[2].dic = res.peripheralStatus;
    data.detailForm5[2].dic = res.peripheralStatus;
  }
});

if (id) {
  queryPeripheralList({ stationId: id }).then((res: any) => {
    if (res && res.length > 0) {
      data.equipmentData = res;
      data.currentDeviceType = res[0].deviceType;
      data.currentID = res[0].id;
      getDetailsInfo(res[0].gateWayNum, res[0].deviceNum);
      data.currentDetailForm = data.detailForm1;
      // getDetailsInfo("123", "1");
    }
  });
}

// 查询设备追后一帧数据
const getDetailsInfo = (gateWayNum: string, deviceNum: string) => {
  selectDeviceRealTimeData({ gateWayNum, deviceNum }).then((res: any) => {
    
    if (res) {
      data.detailData = res;
    }
  });
};

// 状态匹配
const getLabel = (column: any) => {
  const obj: any = column.dic.find((item: any) => {
    return item.value == data.detailData[column.prop];
  });
  return obj ? obj.label : "--";
};

// 设备类型切换
const changeEquipment = (item: any) => {
  data.currentDetailForm = [];
  data.detailForm6 = {};
  data.detailData = {};
  data.currentDeviceType = item.deviceType;
  data.currentID = item.id;

  if (item.deviceType === "1") {
    data.currentDetailForm = data.detailForm1;
  } else if (item.deviceType === "2") {
    data.currentDetailForm = data.detailForm2;
  } else if (item.deviceType === "3") {
    data.currentDetailForm = data.detailForm3;
  } else if (item.deviceType === "4") {
    data.currentDetailForm = data.detailForm4;
  } else if (item.deviceType === "5") {
    data.currentDetailForm = data.detailForm5;
  } else if (item.deviceType === "6") {
    data.detailForm6 = item;
  }

  // TODO
  // getDetailsInfo("123", item.deviceType);

  getDetailsInfo(item.gateWayNum, item.deviceNum)
};
</script>

<style lang="scss" scoped>
.peripheral-equipment {
  height: 100%;
  overflow: hidden;
}
.peripheral-box {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  box-sizing: border-box;
  padding: 0 24px;

  .equipment-item {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #262626;
    font-weight: 500;
    width: calc(25% - 24px);
    box-sizing: border-box;
    margin-bottom: 24px;
    margin-right: 24px;
    margin-top: 12px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    padding: 10px 0 14px;

    &:nth-child(4n) {
      margin-right: 0;
    }

    &.activeItem {
      border: 1px solid rgba(80, 115, 247, 0.3);
      box-shadow: 0px 1px 4px 0px rgba(80, 115, 247, 0.3);
    }
  }

  .left-content {
    padding: 0 12px;
    text-align: center;

    img {
      width: 48px;
      height: 48px;
    }

    .iconfont {
      font-size: 28px;
      color: #5073f7;
      font-weight: 700;
    }
  }

  .right-content {
    width: calc(100% - 90px);

    .row-info {
      font-size: 13px;
      margin-top: 10px;
      display: flex;

      .label {
        text-align: right;
        width: 60px;
        display: inline-block;
        line-height: 1;
      }

      .value {
        font-size: 12px;
        color: #555555;
        font-size: 400;
        width: calc(100% - 60px);
        display: inline-block;
        margin-left: 12px;
        line-height: 1;
      }
    }
  }
}

// .dialog-scroll-wrap {
// }

.row-box {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}
.time-box {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #555555;
  font-weight: 400;
  width: calc(33.3333% - 80px);
  padding: 0 40px;
  margin-bottom: 12px;

  .label {
    color: #262626;
    text-align: right;
    width: 120px;
  }
}
</style>